{% extends 'base.html' %}
{% load static %}
{% load persian %}

{% block title %}{{ article.title }} - {{ site_settings.site_name|default:"خبرگزاری ایثار" }}{% endblock %}

{% block content %}
<div class="article-detail">
    {% if article.categories.exists %}
    <span class="category-tag">
        {% with first_cat=article.categories.first %}
        {% if first_cat.icon %}<i class="fas {{ first_cat.icon }}"></i>{% endif %}
        {{ first_cat.name }}
        {% endwith %}
    </span>
    {% endif %}
    
    <h1>{{ article.title }}</h1>
    
    <div class="meta-info">
        <span><i class="fas fa-calendar-alt"></i> {{ article.publish_time|date:"Y/m/d - H:i"|to_persian_num }}</span>
        <span><i class="fas fa-eye"></i> {{ article.views|to_persian_num }} بازدید</span>
        {% if article.categories.exists %}
        <span><i class="fas fa-tag"></i> <a href="{% url 'category' article.categories.first.slug %}" style="color:#7f8c8d;">{{ article.categories.first.name }}</a></span>
        {% endif %}
    </div>
    
    {% if article.image %}
        <img src="{{ article.image.url }}" alt="{{ article.title }}">
    {% endif %}
    
    <!-- استایل متن با جاستیفای و فاصله خطوط بهتر -->
    <div class="body-text">
        {{ article.body|linebreaks }}
    </div>
</div>

<!-- ===== اخبار مرتبط ===== -->
{% if related_articles %}
<div style="margin-top: 30px; background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 3px 15px rgba(0,0,0,0.05);">
    <h3 style="color: #c0392b; border-right: 5px solid #c0392b; padding-right: 14px; font-size: 18px; font-weight: 700; margin-bottom: 18px;">
        <i class="fas fa-link"></i> اخبار مرتبط
    </h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;">
        {% for related in related_articles %}
        <div class="news-card" style="margin:0;">
            {% if related.image %}
            <img src="{{ related.image.url }}" alt="{{ related.title }}" style="height: 130px;">
            {% else %}
            <div class="no-img" style="height:130px;"><i class="fas fa-image"></i></div>
            {% endif %}
            <div class="card-body" style="padding:12px 15px 15px;">
                <h4 style="font-size: 14px;"><a href="{% url 'detail' related.id %}">{{ related.title|truncatewords:8 }}</a></h4>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock %}